import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'

class App extends Component {
    state = {
        list: [
            {
                title: "第一个商品",
                id: 100
            },
            {
                title: "第二个商品",
                id: 200
            },
            {
                title: "第三个商品",
                id: 300
            }
        ]
    }
    pushDetail = (id) => {
        // this.props.history.push('/detail')

        // 传参的方式  params
        // this.props.history.push({
        //     // url
        //     pathname: "/detail",
        //     params: {
        //         id
        //     }
        // })

        // 传参的方式2  state
        this.props.history.push({
            pathname: "/detail",
            state: {
                id
            }
        })

        // 传参的方式3 
        // this.props.history.push(`/detail/${id}`)

    }
    render() {
        const { list } = this.state
        return (
            <div>
                <ul>
                    { 
                        list.map(item => {
                            return <li onClick = {() => {
                                this.pushDetail(item.id)
                            }} key = { item.id }>
                                { item.title }
                            </li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default withRouter(App)
